<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="8" :xs="24">
        <user-info />
      </el-col>
      <el-col :span="16" :xs="24">
        <el-card>
          <el-tabs v-model="activeTab">
            <el-tab-pane :label="$t('user.center.account.title')" name="account">
              <account />
            </el-tab-pane>
            <el-tab-pane :label="$t('user.center.password.title')" name="password" lazy>
              <password />
            </el-tab-pane>
            <el-tab-pane :label="$t('user.center.login.title')" name="timeline" lazy>
              <timeline />
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup name="center">
  import UserInfo from '@/components/user/center/userinfo'
  import Account from '@/components/user/center/account'
  import Password from '@/components/user/center/password'
  import Timeline from '@/components/user/center/timeline'

  const model = ref('user')
  const activeTab = ref('account')

</script>
